<%-- 
    Document   : testddslick
    Created on : 25-nov-2012, 21:32:51
    Author     : froy
--%><%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type='text/javascript' src='rs/js/jquery-1.8.2.min.js'></script>
        <script type='text/javascript' src='rs/js/jquery.ddslick.min.js'></script>
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <div id="myDropdown"></div>
        <select id="demo-htmlselect">
            <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
                    data-description="Description with Facebook">Facebook</option>
            <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
                    data-description="Description with Twitter">Twitter</option>
            <option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
                    data-description="Description with LinkedIn">LinkedIn</option>
            <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
                    data-description="Description with Foursquare">Foursquare</option>
        </select>
        <a href="http://designwithpc.com/Plugins/ddSlick#demo">Documentación</a>
    </body>
</html>
<script>
    //Dropdown plugin data
    var ddData = [
        {
            text: "Facebook",
            value: 1,
            selected: false,
            description: "Description with Facebook",
            imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
        },
        {
            text: "Twitter",
            value: 2,
            selected: false,
            description: "Description with Twitter",
            imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
        },
        {
            text: "LinkedIn",
            value: 3,
            selected: true,
            description: "Description with LinkedIn",
            imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
        },
        {
            text: "Foursquare",
            value: 4,
            selected: false,
            description: "Description with Foursquare",
            imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
        }
    ];
    $('#myDropdown').ddslick({
        data: ddData,
        width: 300,
        selectText: "Select your preferred social network",
        imagePosition: "right",
        onSelected: function(selectedData) {
            //callback function: do something with selectedData;
        }
    });

    $('#myDropdown2').ddslick({
        onSelected: function(selectedData) {
            //callback function: do something with selectedData;
        }
    });
</script>    